import React,{
	useState,useRef
} from 'react';
import './jdyDemo.less';
import { v4 as uuidv4 } from 'uuid';

import {
	Button,Input,Form,Switch,Radio 
} from 'antd';

import {
	CopyOutlined,
	DeleteOutlined,
} from '@ant-design/icons';

import ViewModal from './viewModal';

function JdyDemo() {

	const dragContentRef = useRef();
	const ViewModalRef = useRef();
	const [lineText,setLineText] = useState([]);
	const [dragType,setDragType] = useState('');
	const [curIndex,setCurIndex] = useState(null);
	const [dragCompIndex,setDragCompIndex] = useState(null);

	function uuid(){
		return uuidv4().replaceAll('-','');
	}

	function onDragStart(ev,type,index){
		// console.log(ev)
		setDragType(type);
		if(type !== 'menu') {
			// console.log(type)
			setDragCompIndex(index);
		}
	}
	function onDragOver(ev){
		ev.preventDefault();
		if(dragType === 'menu') {
			dragContentRef.current.style.borderColor = 'green';
		};
		
	}
	function onDrop(ev){
		ev.preventDefault();
		if(dragType === 'menu') {
			dragContentRef.current.style.borderColor = '#e3e3e3';

			const data = [...lineText];
			const temp = {
				name:'lineText',
				title:'单行文本'+ (data.length + 1),
				span:'4',
				showTitle:true,
				id:uuid()
			}
			data.push(temp);

			setLineText(data);
			setCurIndex(data.length - 1);
		}
		setDragType('');
		
	}

	function onCompClick(item,index){
		// console.log(item)
		setCurIndex(index);

	}

	function onSettingChange(e,key){
		const data = [...lineText];
		data[curIndex][key] = e.target.value;
		setLineText(data)
	}
	function onSwitchChange(checked,key){
		const data = [...lineText];
		data[curIndex][key] = checked;
		setLineText(data)
	}

	function onCompDragOver(e,item,index){
		e.preventDefault();
		// if(e.target.className.startsWith("lineText")){
		// 	e.target.style.border = '1px dashed red';
		// }
		
	}
	function onCompDrop(e,item,index){

		// console.log(e.target);
		// if (e.target.className.startsWith("lineText")){
		// 	e.target.style.border = '1px solid #e3e3e3';
		// }
		
		// console.log(item,index)
		let data = [...lineText];
		const startCompData = {...data[dragCompIndex]};
		data= data.filter(v=>v.id !== startCompData.id);
		// const endCompData = {...data[index]};
		data.splice(index,0,startCompData)
		setLineText(data);
		setCurIndex(index)
	}

	function view(){
		ViewModalRef.current.showModal(lineText)
	}

	function removeComp(id){
		const data = lineText.filter(v=>v.id!==id);
		setLineText(data);
	}

	function copyComp(item){
		const data = [...lineText];
		const item2 = {...item,id:uuid()}
		data.push(item2);
		setLineText(data);
	}

	function onRadioChange(e,key){
		// console.log(e)
		const data = [...lineText];
		data[curIndex][key] = e.target.value;
		setLineText(data)
	}

	const curConfigArr = [];
	const fillters = ['id','name'];
	for(let k in lineText[curIndex]){
		const check = fillters.some(v =>v===k);
		if(check) continue;
		curConfigArr.push({
			key:k,
			val:lineText[curIndex][k]
		})
	}

	return(
		<div className="JdyDemo">
			<header className="header">
				<Button 
					style={{float:'right',marginTop:'20px',marginRight:'30px'}}
					onClick={view}
				>预览</Button>
			</header>

			<div className="container">

				<div className="leftMenu">
					<div className="col">
						<h3 className="title">基础字段</h3>
						<div className="btnBox">
							<Button 
								size="small" 
								icon={<CopyOutlined />}
								draggable={true}
            		onDragStart={(e)=>onDragStart(e,'menu')}
							>
								单行文本
							</Button>
						</div>
					</div>
				</div>

				<div 
					className="dragContent"
					onDragOver={onDragOver} 
					onDrop={onDrop}
					ref={dragContentRef}
				>

					{lineText.map((item,index) =>(
						<div 
							key={item.id}
							className={
								"lineText span" + item.span + 
								( index === curIndex ? ' act' : '' )
							} 
							draggable={true}
							onDragStart={(e)=>onDragStart(e,'comp',index)}
							onDragOver={(e)=>onCompDragOver(e,item,index)} 
        			onDrop={(e)=>onCompDrop(e,item,index)}
							onClick={()=>onCompClick(item,index)}
						>
							{item.showTitle ? (<h4>{item.title}</h4>): null}
							<div className="input">
								<Input  disabled={true}></Input>
							</div>

							<div className="editbar">
								<DeleteOutlined className="del" onClick={()=>removeComp(item.id)} />
								<CopyOutlined className="copy" onClick={()=>copyComp(item)} />
							</div>
						</div>
					))}
					
				</div>

				<div className="rigSetting">
						<Form>
							{curConfigArr.map((v,index)=>{
								return v.key === 'showTitle' 
							?(
								<Form.Item
								key={index}
								label={v.key}
								>
									<Switch checked={lineText[curIndex][v.key]} onChange={(checked)=>onSwitchChange(checked,v.key)} />
								</Form.Item>
							)
							: v.key === 'span' 
							?(
								<Form.Item
								key={index}
								label={v.key}
								>
									<Radio.Group defaultValue={lineText[curIndex][v.key]} buttonStyle="solid" onChange={(e)=>onRadioChange(e,v.key)}>
										<Radio.Button value="1">一列</Radio.Button>
										<Radio.Button value="2">二列</Radio.Button>
										<Radio.Button value="3">三列</Radio.Button>
										<Radio.Button value="4">四列</Radio.Button>
									</Radio.Group>

								</Form.Item>
							)
							:(
								<Form.Item
								key={index}
								label={v.key}
								>
									<Input 
										value={lineText[curIndex][v.key]}
										defaultValue={lineText[curIndex][v.key]}
										onChange={(e)=>onSettingChange(e,v.key)} 
									/>
								</Form.Item>
							)

							})}
						</Form>
				</div>
			</div>
			
			<ViewModal ref={ViewModalRef} />
		</div>
	)
}

export default JdyDemo;